<template>
  <div class="mytodos">
    <div class="mytodos-header">
      <h1 class="top_title">todos</h1>
    </div>
    <div class="mytodos-content">
      <div class="mytodos-content-top">
        <div
          :class="['content-top-left', { allchecked: allChecked }]"
          @click.stop="handleAllCheck"
        >
          <i class="el-icon-arrow-down"></i>
        </div>
        <div class="content-top-right">
          <!-- <input
            type="text"
            @keyup.enter="saveTodo"
            v-model="inputVal"
            v-focus
          /> -->
          <el-input v-model="inputVal" @keyup.enter.native="saveTodo" v-focus></el-input>
        </div>
      </div>
      <div class="mytodos-content-mid">
        <div class="content-mid-list">
          <div
            class="mid-list-item"
            v-for="(item, index) in filterTodos"
            :key="item.id"
          >
            <div class="list-item-left">
              <input type="checkbox" name="" id="" v-model="item.status" @click.stop="changeTodoItem"/>
            </div>
            <div
              :class="['list-item-mid', { completed: item.status }]"
              @dblclick="handleEditTodo(index)" 
            >
              <span :class="['title', { hidden: edit_index == index }]">{{
                item.text
              }}</span>
              <el-input
                :class="[{ hidden: edit_index !== index }]"
                v-model="item.text"
                @blur="saveEditTodo"
                ref="dblclick"
              ></el-input>
            </div>
            <div class="list-item-right" @click.stop="deleteTodo(index)"><i class="el-icon-circle-close"></i></div>
          </div>
        </div>
      </div>
      <div class="mytodos-content-bottom">
        <div class="content-bottom-left">{{ remaining }} items left</div>
        <div class="content-bottom-mid">
          <div 
            @click.stop="handleItemClick('all')"
            :class="['mid-left', { active: activeTab === 'all' }]"
          >
            <!-- <el-tag type="info">All</el-tag> -->
            <el-button plain type="info">ALL</el-button>
          </div>
          <div
            @click.stop="handleItemClick('active')"
            :class="['mid-mid', { active: activeTab === 'active' }]"
          >
              <el-button type="success" plain>Active</el-button>
          </div>
          <div
            @click.stop="handleItemClick('completed')"
            :class="['mid-right', { active: activeTab === 'completed' }]"
          >
            <el-button type="primary" plain>Completed</el-button>
          </div>
        </div>
        <div class="content-bottom-right" @click="handleClearCompleted">
          <el-link type="info">Clear completed</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      edit_index: -1, // -1 表示没有编辑 0 正在编辑第0行
      inputVal: "",
    };
  },
  computed: {
    ...mapGetters('todolist',["filterTodos", "allChecked", "remaining","activeTab"]),
    // ...mapGetters({
    //   "filterTodos":"todolist/filterTodos",
    //   "allChecked":"todolist/allChecked",
    //   "remaining":"todolist/remaining",
    //   "activeTab":"todolist/activeTab"
    // })
  },
  watch: {
  },
  methods: {
    // 清除已完成
    handleClearCompleted: function () {
      this.$store.commit("todolist/handleClearCompleted")
    },
    handleItemClick: function (activeTab) {
      this.$store.commit({
        type:"todolist/changeActiveTab",
        payload:{
          activeTab
        }
      })
    },
    // todo 编辑项 失焦
    saveEditTodo: function () {
      this.edit_index = -1;
    },
    // 双击编辑的逻辑
    handleEditTodo: function (index) {
      this.edit_index = index;
      this.$nextTick(()=>{
            this.$refs.dblclick[index].focus();
      })
// 
    },
    // 删除todo逻辑
    deleteTodo: function (index) {
      // this.todos.splice(index, 1);
      this.$store.commit({
        type:"todolist/deletTodo",
        payload:{
          index:index
        }
      })
    },
    // 全选的逻辑
    handleAllCheck: function () {
      this.$store.commit("todolist/allCheck")
    },
    saveTodo: function () {
      if (!this.inputVal) {
        this.$message({
          message: "输入不能为空！",
          type: "warning",
        });
        return false;
      }
      this.$store.commit({
        type: "todolist/addTodo",
        payload: {
          text: this.inputVal,
          status: false,
          id: Date.now(),
        },
      });
      this.inputVal = ''
    },
    changeTodoItem(){
      this.$store.commit({
        type:"todolist/changeActiveTab",
        payload:{
          activeTab:'all'
        }
      })
      console.log(5)
    }
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus();
      },
    },
  },
};
</script>
<style lang='less' scoped>
@import '@/assets/css/todo.less';
</style>
